import { useState } from 'react';
import s from './index.module.scss';
import SearchHeader from './components/SearchHeader';
import Tabs from './components/Tabs';
import Ads from './components/Ads';
import Sliders from './components/Sliders';
import SliderItem from './components/Sliders/components/SliderItem';
import Recommend from './components/Recommend';
import Content from './components/Content';
import Space from './components/Space';

import { useContentData } from './hooks';
import { slidersData, tabsData } from './mock/index';

const HomePage = ({ history }) => {
  const { contentList } = useContentData();
  return (
    <>
      <div className={s.container}>
        <SearchHeader />
        <Tabs tabsData={tabsData} />
        <Ads />
        <Sliders duration={2000}>
          {slidersData &&
            slidersData.map((item) => {
              return <SliderItem key={item.title} data={item} />;
            })}
        </Sliders>
        <Recommend />
        {contentList &&
          contentList.map((item) => {
            return <Content key={item.title} content={item} />;
          })}
        <Space width={375} height={56} />
      </div>
    </>
  );
};

export default HomePage;
